<template>
    <div>
        <div class="bg"></div>
        <div class="tools" :style="toolsStyle">
            <div class="num">
                <label>数量：</label>
                <el-input-number v-model="num" :min="1" label="请输入数量" size="mini"></el-input-number>
            </div>
        </div>
        <div class="prizes">
            <template v-for="index of num">
                <div class="prize-item">
                    <div style="position: relative">
                        <canvas v-draw width=120 height=60
                                style="position: absolute; left: 0;top: 0;"></canvas>
                        <canvas v-wipe width=120 height=60
                                style="position: absolute; left: 0; top: 0;"></canvas>
                    </div>
                </div>
            </template>
        </div>
        <!--        <table class="prize-table">-->
        <!--            <tbody>-->
        <!--            <tr v-for="index of parseInt(rowNum)">-->
        <!--                <td v-for="i of parseInt(colNum)">-->
        <!--                    <div style="width: 120px; height: 60px;position: relative;">-->
        <!--                        <canvas v-draw width=120 height=60-->
        <!--                                style="position: absolute; left: 0;top: 0;"></canvas>-->
        <!--                        <canvas v-wipe width=120 height=60-->
        <!--                                style="position: absolute; left: 0; top: 0;"></canvas>-->
        <!--                    </div>-->
        <!--                </td>-->
        <!--            </tr>-->
        <!--            </tbody>-->
        <!--        </table>-->
    </div>
</template>

<script>

export default {
    name: "AllPrize",
    data() {
        return {
            rowNum: 5,
            colNum: 5,
            num: 5,
            toolsStyle: {}
        }
    },
    methods: {
        handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop// 滚动条距离顶部的距离
            if (scrollTop > 0) { // 当元素到顶部及以上时
                this.toolsStyle = {
                    backgroundColor: '#d0bebe',
                    boxShadow: '0 4px 10px rgba(0, 0, 0, .1)'
                };
            } else {
                this.toolsStyle = {};
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    }
}
</script>

<style lang="scss" scoped>
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: #1fc8db;
    background-image: linear-gradient(141deg, #e06e29 0%, #d95e4b 51%, #d34a4a 75%);
}

.tools {
    padding: 10px;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    box-sizing: border-box;
}

label {
    line-height: 20px;
}

.el-input {
    width: 80px;
}

.prizes {
    display: flex;
    flex-wrap: wrap;
    padding: 60px 10px 0 10px;

    .prize-item {
        padding: 4px;
        margin-bottom: 10px;
        width: 120px;
        height: 60px;
        position: relative;
        border: .5px solid #e6e7e8;
    }
}

@media screen and (max-width: 700px) {
    .prizes {
        justify-content: space-between;
    }
}
</style>